.login-form {
  gap: $gap-page-component; // 24px between buttons and form

  &--hidden {
    opacity: 0;
  }

  &__sso-image {
    vertical-align: middle;
    height: 20px;
    width: 20px;
    margin-right: 10px;
    border-radius: 20%;
  }

  &__sso-legend {
    vertical-align: middle;
  }

  &__actions,
  &__form {
    display: flex;
    flex-direction: column;
    gap: $gap-form;
  }

  // Login button styles
  // Login and SSO button widths will always be equal
  &__actions {
    align-items: center;
    align-self: center;
    flex-direction: column-reverse;
  }

  &__login-actions {
    display: flex;
    flex-direction: column;
    gap: $gap-form;
    width: px-to-rem(228);
  }

  &__forgot-link {
    align-self: flex-start;
  }

  &__sso-btn.button {
    border: 1px solid $core-fleet-black;
    white-space: nowrap;
  }
  // End login button styles
}

.two-factor-check-email {
  align-items: start;
  gap: $pad-xlarge;

  h1 {
    font-size: $large;
    font-weight: $bold;
    margin: 0;
  }

  .back-link {
    svg {
      path {
        fill: transparent;
      }
    }
  }
}
